{extend name="public/base"/}
{block name="style"}
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/index.css" />
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/style.css" />
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/all_header.css" />
	<style>
    .bookrack{
        width: 96%;
        margin: 10px auto 60px auto;
    }
    .bookrack li{
        text-align: center;
        /* border-bottom: 1px solid #e8e8e8; */
        background: rgba(255, 255, 255, 0.08);
        width: 28%;
        display: inline-block;
        position: relative;
        margin: 10px 2%;
    }
    .bookrack li img{
        width: 100%;
    }
    .book-name{
        margin-top: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .book-update{
        text-align: center;
        /* margin-left: 94px; */
        position: absolute;
        /* display: block; */
        width: 100%;
        z-index: 200;
        bottom: 21px;
        left: 0;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: 12px;
    }
    .book-update marquee {
        margin: 3px 0;
    }
    .book-pic{
        width: 100%;
    }
    .tab-foot{
        color: #2e2e2e;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: rgb(255, 255, 255);
        border-top: 1px solid #f1f1f1;
        z-index: 1001;
        height: 50px;
        display: flex;
    }
    .foot-li{
        font-size: 12px;
        display: inline-block;
        width: 24%;
        text-align: center;
        padding: 5px 0;
        color: #5c5c5c;
        flex:0.2;
    }
    .foot-li span{
        display: inline-block;
        width: 22px;
        height: 22px;
        text-align: center;
        background-size: 100%;
        margin-bottom: 4px;
    }
    .foot-li p{
        font-size: 12px;
    }
    .icon-1{
        background:url(/public/static/images/home_b.png) no-repeat center center;
    }
    .icon-2{
        background:url(/public/static/images/bookrack_b_2.png) no-repeat center center;
    }
    .icon-3{
        background:url(/public/static/images/person_b_1.png) no-repeat center center;
    }
    .icon-4{
        background:url(/public/static/images/sign-foot.png) no-repeat center center;
    }
    .icon-5{
        background:url(/public/static/images/rechange_b_1.png) no-repeat center center;
    }
    .add_color{
        color: #ffb85d;
    }
    .tab-nav{
        display: flex;
    }
    .tab-top{
        display: table;
        width: 70%;
        border-collapse: separate;
        border-spacing: 5px 12px;
        text-align: center;
        line-height: 2em;
        border-bottom: 2px solid rgba(255, 184, 93, 0.3);
    }
    .tab-book{
        color: gray;
    }
    .tab-read{
        display: table-cell;
        font-size: 20px;
        color:#ffb85d;
        font-weight: bold;
    }
    .tab-editor{
        display: inline-block;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        width: 54px;
        text-align: center;
        background: #ffb85d;
        box-shadow: 1px 1px 1px #b07e3e;
        color: #fff;
        margin: 18px 18px 18px 50px;
        flex: 1;
        border-radius: 3px;
    }
    .book-delete{
        text-align: center;
        position: absolute;
        background: rgba(44, 34, 34, 0.5);
        /*display: inline-block;*/
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 500;
        display: none;
    }
    .book-delete span{
        margin-top: 55%;
        display: inline-block;
        width: 40px;
        height: 40px;
        text-align: center;
        background-size: 100%;
        background: url(/public/static/images/delete.png) no-repeat center center;
    }

    .delete-all{
        text-align: center;
        color: #ffb85d;
        background: rgba(255, 233, 204, 0.5);
        padding: 10px;
        margin-bottom: 5px;
        display: none;
    }
    .delete-all span{
        display: inline-block;
        width: 16px;
        height: 16px;
        text-align: center;
        background-size: 100%;
        background: url(/public/static/images/delete-all.png) no-repeat center center;

    }
    .delete-all p{
        display: inline-block;
        vertical-align: text-top;
    }
    .read-nearly{
        position: relative;
    }
    .nearly-bg{
        width: 100%;
        height: 175px;
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(10px);
    }
    .nearly-bg img{
        width: 100%;
        height: 100%;
        background-size: cover;
    }
    .nearly-bd {

    }
    .bd-outer{
        position: absolute;
        top: 0;
        /* margin: 10px; */
        width: 100%;
        height: 180px;
        background: rgba(0, 0, 0, 0.5);
    }
    .nearly-pic{
        width: 100px;
        display: inline-block;
        float: left;
        margin: 12px;
    }
    .nearly-pic img{
        width: 100%;
    }
    .nearly-text{
        color: #ddd;
        padding-right: 8px;
    }
    .nearly-text h3{
        padding-top: 20px;
    }
    .nearly-text p{
        margin-top: 28px;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .go-read{
        float: right;
        margin: 40px 20px;
        display: inline-block;
        background: #ffb85d;
        width: 95px;
        text-align: center;
        height: 25px;
        line-height: 25px;
        border-radius: 3px;
        box-shadow: 1px 1px 1px #b07e3e;
        color: #fff;
    }
    .link{
        position: absolute;
        background: rgba(255, 255, 255, 0);
        /* display: inline-block; */
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 300;
    }

</style>

<style>
		*{margin:0;padding:0;}
		body{max-width:768px;margin:auto;background:#fafafa}
		.table_all{display:table;width:100%;margin:auto;}
		.cell_all{display:table-cell}
		.row_all{display:table-row}
		.box_all{
			display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
			display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
			display: -ms-flexbox;      /* TWEENER - IE 10 */
			display: -webkit-flex;     /* NEW - Chrome */
			display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
			flex-flow: row wrap;
		}
		.wap_user{width:40px;
			height:40px;
		}

		.font-16{font-size:16px}
		.font-18{font-size:18px;}
		.font_20{font-size:20px}
		.font_28{font-size:28px}
		.font_33{font-size:33px;}
		.Money_button {
			width: 180px;
			height: 45px;
			background: #44B549;
			line-height: 45px;
			color: #fff;
			border-radius: 5px;
			display: block;
			clear: both;
			text-align: center;
			margin: 0 auto;
			margin-top: 10px;
			margin-bottom: 10px;
			font-size: 25px;
			border:none;
		}
		.footer{margin:auto;padding-top:15px;background:#fff;min-height:140px;border-top:5px solid #eee;}
		.footer a{color:#000;
			font-size:12px;width:100%;
			display:inline-block;
			/*font-size:12px;height:1em;line-height:1em;*/
		}
		.footer .auto li{width:calc( 100%/5 - 2px );text-align:center;}
		.footer .auto{margin:auto; border-bottom:1px solid #eee;padding-bottom:15px;}
		.center{text-align:center}
		/*li[class="cursor"]{border-right:1px solid #ccc;}*/
		.copy{margin:auto;width:100%;
			text-align: justify;
			font-size: 0;
			display:table;
		}
		.copy1{text-align:center;}
		.copy1 span{
			background:#008eea;
			color:#fff;
			width:30px;height:30px;line-height:30px;
			text-align:center;
			box-shadow:5px 5px 5px #bbb;
			border-radius:5px;
			display:inline-block;margin:10px 3px;
		}
		.copy li{
			line-height:30px;
			display: inline-block;
			text-align:center;
			width:25%;margin:0;
		}
		.a_boxr{border:solid #eee;border-width:0px 1px 1px 0px;}
		.a_box1{border:solid #eee;border-width:1px 1px 1px 1px }
		.a_box2{border:solid #eee;border-width:1px 1px 1px 0px;}
		.a_box3{border:solid #eee;border-width:0px 1px 1px 1px;}
		.copy li a{font-size:12px;margin:0;}

		.footer-pub{
			text-align: center;
			margin: auto;
			padding: 15px 0 20px 0;
		}
		.footer-pub a{
			border-right: 1px solid #4d4d4d;
			padding: 0 20px;
			font-size: 10px;
			color: #4d4d4d;
		}
	</style>
	<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/static/js/jquery.cookie.js"></script>
{/block}

{block name="body"}
<div class="info_nav">
    <a href="javascript:history.back(-1)" class="icon"><i class="icon iconfont icon-jiantou1 font_28"></i></a>
    <span class="text">阅读记录</span>
    <a href="/" class="icon font-14">首页</a>
    <a href="{:url('books/booksfav')}" class="icon font-14">书架</a>
    <a href="{:url('user/index')}" class="icon-w45">
                <img src="http://q.qlogo.cn/qqapp/101376496/022418C8445A92F58AA8687491256075/100" />
            </a>
</div>
<div class="container" style="min-height:calc( 100% - 200px );">
    <div class="tab-nav">
    <div class="tab-top">
    <a href="{:url('books/booksfav')}" class="tab-book">我的书架</a>
    <a href="{:url('books/footprint')}" class="tab-read">阅读记录</a>
    </div>
    
    </div>
    <div class="tab-content clearfix overflow" id="con4" style="margin-top: 15px;">
    <div class="tab-con" style=" float:left; width:100%;">
    <div class="delete-all">
    <span></span>
    <p>删除全部</p>
    </div>
    <div class="read-nearly">
    <div class="book-delete"><span style="margin-top: 70px"></span></div>
    <div class="nearly-bg"><img src="http://i.qcread.com/imagedata/2017/04/26/6abf1c660d377a94efb56842b4cb1303s.jpg"></div>
    <div class="bd-outer">
    <div class="nearly-bd">
    <div class="nearly-pic"><img src="http://i.qcread.com/imagedata/2017/04/26/6abf1c660d377a94efb56842b4cb1303s.jpg"></div>
    <div class="nearly-text"></div>
    <div class="nearly-go-on"><a class="go-read" target="_blank">继续阅读</a></div>
    </div>
    </div>

    </div>
        <ul class="bookrack">
		<script>
			var cooikes = $.cookie("history");
			$(function () {
				if (cooikes) {
					var json = eval("(" + cooikes + ")");
					console.log(json);
					var list = "";
					$(json).each(function () {
						list += '<li data-bookId ="' + this.bookid + '" data-chapterId ="' + this.chapterid + '" data-chapterName="' + this.title + '" data-link="' + this.url + '"><div class="book-delete"><span></span></div><div class="book-pic"><img src="' + this.img + '" alt="作品封面"/></div><p class="book-name">' + this.book + '</p><a href="' + this.url + '" title="' + this.book + '" class="link"></a></li>';
					});
					$(".bookrack").html(list);
				} else {
					$(".bookrack").html('<div id="noDataPanel" class="nodate"><span class="l_1" style="line-height:150px;">没有读过的书哦！</span></div>');

				}
			});
			</script>

		
				
		</ul>
    </div>
    </div>
    <div class="tab-foot">
        <a href="/" class="foot-li">
            <span class="icon-1"></span>
            <p>首页</p>
        </a>
        <a href="{:url('user/pay')}" class="foot-li">
            <span class="icon-5"></span>
            <p>充值</p>
        </a>
        <a href="{:url('books/booksfav')}" class="foot-li">
            <span class="icon-2"></span>
            <p class="add_color">书架</p>
        </a>
        <a href="{:url('user/index')}" class="foot-li">
            <span class="icon-3"></span>
            <p>我的</p>
        </a>
    </div>
</div>


{/block}

{block name="script"}


<script type="text/javascript" src="__PUBLIC__/static/js/com.js"></script>

<script type="text/javascript" >
    $(function(){
        $(".foot").hide();
        var hidden = $(".bookrack li");
        for(var i=0;i<hidden.length;i++){
            hidden.eq(0).hide();
            var bookName =  hidden.eq(0).find("p").filter(".book-name").html();
            var bookPic =  hidden.eq(0).find("img").attr("src");
            var bookId =  hidden.eq(0).attr("data-bookId");
            var chapterId =  hidden.eq(0).attr("data-chapterId");
            var chapterName =  hidden.eq(0).attr("data-chapterName");
            var link = hidden.eq(0).attr("data-link")
            $(".nearly-text").html('<h3>'+bookName+'</h3> <p class="read-mark">'+chapterName+'</p>');
            $(".go-read").attr("href",link);
            $(".nearly-bg img").attr("src",bookPic);
            $(".nearly-pic img").attr("src",bookPic);
        }

        $(".tab-editor").click(function() {
            var del = $(".bookrack li");
            if($(".tab-editor").text()=="编辑"){
                $(".tab-editor").text("完成");
                $(".delete-all").css("display","block");
                $(".read-nearly .book-delete").css("display","inline-block");
                for(var i=0;i<del.length;i++){
                    del.eq(i).find(".book-delete").css("display","inline-block")
                }
            }else{
                $(".tab-editor").text("编辑");
                $(".delete-all").css("display","none");
                $(".read-nearly .book-delete").css("display","none");
                for(var j=0;j<del.length;j++){
                    del.eq(j).find(".book-delete").css("display","none")
                }
            }
        });
    })
</script>

{/block}